<template>
    <a-modal v-model:visible="_d.visible" title="新建会话" 
        okText="确认"
        cancelText="取消"
        @ok="handleOk">
      <a-form :label-col="{style: {width: '7em'}}">
          <a-form-item label="会话名称" v-bind="validateInfos.name">
              <a-input v-model:value="_d.form.name" placeholder="请输入"/>
          </a-form-item>
      </a-form>
    </a-modal>
  </template>
  
  <script setup>
      import { reactive, ref, onMounted } from 'vue'
      import {Form, notification} from "ant-design-vue";
  
      import {ApiPost} from "@/api/request.js";

      import {useUserStore} from "@/store/userStore.js";
	    const userStore = useUserStore();
  
        const emit = defineEmits(['add']);

      const _d = reactive({
        visible: false,

        form: {
            name: '',
        },

        rules: {
            name: [
                { required: true, message: '请输入会话名称' }
            ],
        }
      })
  
      const {resetFields, validate, validateInfos} = Form.useForm(_d.form, _d.rules);
  
        function open() {
            resetFields();
            _d.visible = true;
        }

        function handleOk() {
            validate().then(() => {
                let params = {
                    ..._d.form,
                    userId: userStore.userinfo.userId
                }
                ApiPost("/Chat/insertesession", params).then(res => {
                    notification.success({
                        message: '提示',
                        description: '登录成功'
                    });
                    emit('add', res.data);
                    _d.visible = false;
                })
            })
        }

        defineExpose({
            open
        })
  
  </script>
  
  <style lang="less" scoped>
  
  .send-box {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      .ipt {
          width: 0;
          flex: 1;
      }
      .btn {
          padding: 0;
          width: 84px;
      }
  }
  </style>